<template>
  <div class="change_data">
    <slot :show="show"></slot>
    <van-popup v-model="show" round position="bottom" @close="closePop">
      <van-cascader v-model="cascaderValue" title="请选择状态" :options="options" :closeable="false"
        :field-names="fieldNames">
        <template #title>
          <div class="set_title">

            <div class="title">筛选状态</div>
            <div>

              <van-button class="f-26" style="margin-right:10px" @click="cancel">清除筛选</van-button>
              <van-button class="f-26" @click="confirm">确定</van-button>
            </div>
          </div>
        </template>
      </van-cascader>
    </van-popup>
  </div>
</template>

<script>
 
  export default {
    name: 'FranchiessStatus',
    model: {
      prop: 'control_search',
      event: 'change',
    },
    props: {
      control_search: {
        type: Boolean,
        default: false
      },
      search_type: String
    },
    mounted() {
      
    },
    methods: {
     
      change_pop() {
        this.show = true;
      },
      
      confirm() {
        
        this.$emit('update:state',this.cascaderValue);
        this.show = false;
      },
     
      cancel() {
        this.show = false;
      },
      closePop() {
        // this.setOptions();
        this.show = false;
      }
    },
    data() {
      return {
        show: false,
        cascaderValue: '',
        fieldNames: {
          text: 'name',
          value: 'id',
          children: 'items'
        },
        options: [{
            name: '全部',
            id: 0,
        },{
            name: '已通过审核',
            id: 1,
        },{
            name: '未审核',
            id: 2,
        },{
            name: '审核已拒绝',
            id: 3,
        },{
            name: '已解约',
            id: 4,
        },{
            name: '已提交',
            id: 5,
        }],
        
      };
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-cascader__header {
    width: 700px;
    margin: 0 auto;
  }

  /deep/.van-cascader__title {
    width: 100%;

  }

  /deep/ .van-cascader__option {
    font-size: 24px;
  }

  /deep/ .van-tab {
    font-size: 24px;
  }


  .change_data {


    .set_title {
      display: flex;

      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 26px;
      }
    }

    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>